/*
  学习目标：使用React路由，实现路径跳转组件切换
  步骤：
    1. npm i react-router-dom@5.3
    2. 导入组件 HashRouter Route Link
    3. 使用HashRouter 和Route组件
    4. 使用Link去跳转
*/

import React from 'react';
import ReactDom from 'react-dom/client';
import { HashRouter, Route, Link } from 'react-router-dom';

class Handler extends React.Component {
  render() {
    return (
      <div>
        {/* HashRouter负责路由实例化 */}
        <HashRouter>
          {/* Link组件，to属性代表要跳转的路径 */}
          <Link to="/home">首页</Link>
          <br />
          <Link to="/my">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>

          {/* Route组件，类似Vue中的对象规则和挂载点 */}
          {/* path 组件路径 component组件名 */}
          <Route path="/Home" component={Home}></Route>
          <Route path="/My" component={My}></Route>
          <Route path="/Friend" component={Friend}></Route>
        </HashRouter>
      </div>
    );
  }
}

function Home() {
  return (
    <div>
      <h1>我是Home组件</h1>
    </div>
  );
}
function My() {
  return (
    <div>
      <h1>我是My组件</h1>
    </div>
  );
}
function Friend() {
  return (
    <div>
      <h1>我是Friend组件</h1>
    </div>
  );
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
